<template>
  <view class="searchList_container app_container_page">
    <van-search class="search" :value="searchValue" @change="searchChange" :placeholder="`请输入${code == 0 ? '幼儿园' : '门店'}名称`" use-action-slot @search="searchClick" background="#ffff62">
      <view slot="action" @click="searchClick" class="searchBtn">搜索</view>
    </van-search>
    <view class="tab">
      <view class="tab1" :class="code == 0 ? 'active' : ''" @click="activeChange(0)">幼儿园</view>
      <view :class="code == 1 ? 'active' : ''" @click="activeChange(1)">门店</view>
    </view>
    <view class="searchListContent">
      <pullRefreshView v-show="code === 0" class="pullRefreshKindergartenView" ref="pullRefreshKindergartenView" :fetchFn="fetchKindergartenList">
        <template v-slot:default="{ list }">
          <appKindergartenCard v-for="kindergarten in list" :key="kindergarten.id" :kindergarten="kindergarten" class="healthyCard" />
        </template>
      </pullRefreshView>
      <pullRefreshView v-show="code === 1" class="pullRefreshShopView" ref="pullRefreshShopView" :fetchFn="fetchShopList">
        <template v-slot:default="{ list }">
          <appShopCard v-for="store in list" :key="store.id" :store="store" @SHOP_CARD_CLICK="toShopDetail" class="shopCard"></appShopCard>
        </template>
      </pullRefreshView>
    </view>
  </view>
</template>

<script>
import appShopCard from '@/components/app/app_shop_card.vue'
import pullRefreshView from '@/components/app/pull-refresh-view.vue'
import appKindergartenCard from '@/components/app/app_kindergarten_card.vue'
import { kindergartenList, getstoreList } from '@/api/home'

export default {
  components: {
    pullRefreshView,
    appKindergartenCard,
    appShopCard
  },
  data() {
    return {
      searchValue: '',
      code: 0
    }
  },
  methods: {
    activeChange(val) {
      this.code = val
    },
    fetchKindergartenList(params) {
      return kindergartenList({
        ...params,
        kindergartenName: this.$parent.searchValue,
        province: '',
        city: '',
        // city: this.$store.state.activeAddress.cityName ? this.$store.state.activeAddress.cityName + '市' : '',
        district: ''
      })
    },
    fetchShopList(params) {
      return getstoreList({
        ...params,
        storeName: this.$parent.searchValue,
        province: '',
        city: '',
        // city: this.$store.state.activeAddress.cityName ? this.$store.state.activeAddress.cityName + '市' : '',
        district: ''
      })
    },
    searchChange(e) {
      this.searchValue = e.detail
      this.searchClick()
    },
    searchClick() {
      this.$refs[this.code === 0 ? 'pullRefreshKindergartenView' : 'pullRefreshShopView'].fetchList(true).then(() => {
        uni.stopPullDownRefresh()
      })
    },
    toShopDetail(val) {
      uni.navigateTo({
        url: '/pages/shop/shopDetail?id=' + val.id
      })
    }
  },
  onLoad(val) {
    this.searchValue = val.searchValue
  },
  onPullDownRefresh() {
    this.$refs[this.code === 0 ? 'pullRefreshKindergartenView' : 'pullRefreshShopView'].fetchList(true).then(() => {
      uni.stopPullDownRefresh()
    })
  },
  onReachBottom() {
    this.$refs[this.code === 0 ? 'pullRefreshKindergartenView' : 'pullRefreshShopView'].fetchList()
  }
}
</script>

<style lang="scss">
.searchList_container {
  app-kindergarten-card ~ app-kindergarten-card {
    margin-top: 30rpx;
  }
  app-shop-card ~ app-shop-card {
    margin-top: 30rpx;
  }

  .search {
    width: 100%;
    height: 100rpx;
    .van-search {
      background: $theme-color !important;
      height: 100rpx;
    }
    .van-search__content {
      background: $theme-color !important;
      padding: 0 20rpx;
    }
    .van-search--withaction {
      padding: 0;
    }

    .van-search__field {
      background: #ffffff;
      border-radius: 30rpx;
      padding: 0 24rpx;
    }

    .van-search__action {
      background: $theme-color;
    }
    .searchBtn {
      font-size: 38rpx;
      color: #000000;
      margin-right: 7px;
    }
  }
  .searchListContent {
    padding: 0 30rpx;
  }
}
</style>
